<template>
    <div class="body">
        <p>1.打开微信，点击微信支付</p>
        <img src="/assets/1.jpg" alt="">
        <p>2.找到相应的支付订单，点击进去</p>
        <img src="/assets/2.jpg" alt="">
        <p>3.将转账单号复制下来，粘贴到下方输入框中</p>
        <img src="/assets/3.jpg" alt="">
        <p>4.点击确认即可，后台将在24小时内进行处理</p>
        <van-field v-model="wxcode" type="" label="微信订单号：" class="input-password" @focus="handleFocus(2)"
            @blur="handleBlur(2)">
        </van-field>

        <!-- 提交按钮与粒子效果容器 -->
        <div class="button-container">
            <van-button class="submit-btn" @click="handleSubmit">
                确认单号
                <span class="button-particles"></span>
            </van-button>
        </div>

        <div class="button-container">
            <van-button class="submit-btn" @click="handleBack">
                返回
                <span class="button-particles"></span>
            </van-button>
        </div>

        <!-- 悬浮光效 -->
        <div class="floating-light" :style="{
            left: floatingLightPos.x + 'px',
            top: floatingLightPos.y + 'px',
            opacity: floatingLightOpacity
        }"></div>

    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = ref(proxy.$business.value)
const wxcode = ref()

// 提交订单
const handleSubmit = async () => {
    // 订单是不是32位，且是不是纯数字
    if (wxcode.value.length !== 32 || !/^\d+$/.test(wxcode.value)) {
        proxy.$fail('请输入正确的订单号')
        return
    }

    // 提交订单
    const res = await proxy.$http.post({
        url: '/order/addorder',
        params: {
            wxcode: wxcode.value,
            id: business.value.id,
        }
    })

    if (res.code === 1) {
        proxy.$success('提交成功')
        setTimeout(() => {
            proxy.$router.back()
        }, 1500)
    }
    else {
        proxy.$fail(res.msg)
    }

}

//返回
const handleBack = () => {
    proxy.$router.back()
}

// 悬浮光效位置与透明度
const floatingLightPos = reactive({ x: 0, y: 0 });
const floatingLightOpacity = ref(0);

// 输入框状态管理
const inputStates = reactive({
    focusedIndex: -1
});

// 处理输入框聚焦
const handleFocus = (index) => {
    inputStates.focusedIndex = index;
    // 聚焦时增强光效
    floatingLightOpacity.value = 0.6;
};

// 处理输入框失焦
const handleBlur = (index) => {
    inputStates.focusedIndex = -1;
    // 失焦时减弱光效
    floatingLightOpacity.value = 0.3;
};

</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.body {
    width: 100%;
    max-width: 550px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

img {
    width: 40%;
}

p {
    font-size: 1rem;
    line-height: 2rem;
    text-indent: 0.8rem;
    color: aliceblue;
}

/* 输入框样式 - 保持原有 */
.input-password {
    background: linear-gradient(135deg, rgba(255, 236, 236, 0.55), rgba(101, 212, 239, 0.38));
    border-radius: 2.5rem;
    margin: 1.5rem auto;
    height: 4.5rem;
    font-size: 1.1rem;
    text-align: center;
    line-height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 -2px 8px rgba(255, 255, 255, 0.05),
        inset 0 2px 8px rgba(255, 255, 255, 0.05),
        inset 0 -2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    color: white;
}

.input-password:focus-within {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 -4px 16px rgba(255, 255, 255, 0.08),
        inset 0 4px 12px rgba(255, 255, 255, 0.08),
        inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    /* 聚焦时添加额外光效 */
    animation: inputFocus 0.5s ease-out;
}

/* 输入框底部装饰线 */
.input-password::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #6a11cb, #2575fc, #13c2c2);
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.input-password:focus-within::after {
    width: 100%;
}

/* 输入框标签样式 */
.input-password .van-field__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-right: 0.5rem;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* 输入框内部样式 */
.input-password .van-field__control {
    color: white;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-align: center;
    padding: 0.5rem 0;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* 占位符文本样式 */
.input-password .van-field__control::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    letter-spacing: 1px;
}

/* 输入框内边距 */
.input-password .van-field__body {
    padding: 0 1.5rem;
}

/* 不同输入框色调变化 */
.input-password:nth-child(1):focus-within::after {
    background: linear-gradient(90deg, #6a11cb, #a855f7);
}

.input-password:nth-child(2):focus-within::after {
    background: linear-gradient(90deg, #2575fc, #3b82f6);
}

.input-password:nth-child(3):focus-within::after {
    background: linear-gradient(90deg, #13c2c2, #06b6d4);
}

/* 提交按钮容器 */
.button-container {
    margin: 3rem auto 2rem;
    text-align: center;
    position: relative;
}

/* 提交按钮样式 */
.submit-btn {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 3rem;
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 15px rgba(106, 17, 203, 0.4),
        0 8px 30px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    z-index: 1;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(106, 17, 203, 0.5),
        0 12px 40px rgba(37, 117, 252, 0.4);
    background: linear-gradient(135deg, #7b2ffd 0%, #3a86ff 100%);
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #6a11cb, #2575fc, #13c2c2);
    z-index: -1;
    border-radius: 3.2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.submit-btn:hover::before {
    opacity: 1;
    animation: btnGlow 2s ease-in-out infinite;
}

/* 按钮点击特效 */
.btn-active {
    animation: btnClick 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 悬浮光效 */
.floating-light {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(106, 17, 203, 0.2) 0%, rgba(37, 117, 252, 0.1) 50%, transparent 80%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.2s ease-out;
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: screen;
    box-shadow:
        0 0 60px rgba(106, 17, 203, 0.3),
        0 0 120px rgba(37, 117, 252, 0.2);
    /* 光效呼吸动画 */
    animation: lightBreath 8s ease-in-out infinite;
}

/* 光效呼吸动画 */
@keyframes lightBreath {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 60px rgba(106, 17, 203, 0.3),
            0 0 120px rgba(37, 117, 252, 0.2);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow:
            0 0 80px rgba(106, 17, 203, 0.4),
            0 0 160px rgba(37, 117, 252, 0.3);
    }
}

/* 输入框聚焦动画 */
@keyframes inputFocus {
    0% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 0 rgba(106, 17, 203, 0),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    50% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(106, 17, 203, 0.6),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    100% {
        box-shadow:
            0 16px 40px rgba(0, 0, 0, 0.4),
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 0 0 rgba(106, 17, 203, 0),
            inset 0 4px 12px rgba(255, 255, 255, 0.08),
            inset 0 -4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* 按钮发光动画 */
@keyframes btnGlow {

    0%,
    100% {
        filter: blur(10px);
        background-position: 0% 50%;
    }

    50% {
        filter: blur(15px);
        background-position: 100% 50%;
    }
}

/* 按钮点击动画 */
@keyframes btnClick {
    0% {
        transform: scale(1);
        box-shadow:
            0 8px 25px rgba(106, 17, 203, 0.5),
            0 12px 40px rgba(37, 117, 252, 0.4);
    }

    50% {
        transform: scale(0.95);
        box-shadow:
            0 4px 15px rgba(106, 17, 203, 0.4),
            0 8px 30px rgba(37, 117, 252, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow:
            0 8px 25px rgba(106, 17, 203, 0.5),
            0 12px 40px rgba(37, 117, 252, 0.4);
    }
}
</style>
